<template>
  <div class="adhome">
    <!-- <div class="adhome-logo">
      <img src="@/assets/images/login_logo.png" />
    </div> -->
    <el-menu :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="/adminHome/allApi"
        @click="$router.push('allApi')">应用</el-menu-item>
      <el-menu-item index="/adminHome/allService"
        @click="$router.push('allService')">服务</el-menu-item>
    </el-menu>
    <div class="adhome-content">
      <router-link :to="{ name: 'home'}">
        <i class="el-icon-back"></i>
        返回
      </router-link>
    </div>
    <div class="viewFramework-product">
      <router-view />
    </div>
  </div>
</template>

<style lang="less" scoped>
@import "./index.less";
</style>

<script type="text/ecmascript-6">
export default {
  data() {
    return {
      activeIndex: "/adminHome/creatApi"
    };
  },
  methods: {
    // 初始化
    init: function() {
      console.log(this.$route);
    },
    getPath() {
      this.activeIndex = this.$route.path;
    },
    // 设置最小高度
    setMinHeight() {
      var ch = document.body.clientHeight - 122;
      if (document.querySelector(".viewFramework-product")) {
        document.querySelector(".viewFramework-product").style.minHeight =
          ch + "px";
      }
      if (document.querySelector(".viewFramework-product .user_item_box")) {
        document.querySelector(
          ".viewFramework-product .user_item_box"
        ).style.minHeight = ch + "px";
      }
      if (document.querySelector(".user_item_box .left")) {
        document.querySelector(".user_item_box .left").style.minHeight =
          ch + "px";
      }
    }
  },
  created() {
    this.init();
  },
  mounted() {
    this.setMinHeight();
    // 解决刷新导航栏选中问题
    // let href = window.location.href;
    // this.activeIndex = href.split("/#")[1];
    this.activeIndex = this.$route.path;
    console.log(this.activeIndex);
  },
  watch: {
    // 解决浏览器前进后退导航栏高亮问题
    $route: "getPath"
  },
  updated: function() {
    let self = this;
    this.$nextTick(() => {
      self.setMinHeight();
    });
  }
};
</script>
